<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <a-form size="small" :model="pageData.queryData" layout="inline">
          <a-form-item label="当班日期">
            <a-range-picker  popup-container="html" 
              :style="{ width: '300px' }"
              class="bacClass"
              v-model="pageData.queryData.createTimeArr"
            />
          </a-form-item>
          <a-form-item label="流转卡号">
            <a-input
              @press-enter="selectHandler"
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="pageData.queryData.flowCardCode"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <!-- pageData.btnList -->
        <Toolbar
          :items="['查询', '新增', '删除', '导出']"
          @add="addHandler"
          @del="deleteHandler"
          @select="selectHandler"
          @export="exportHandler"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="table.dataList"
        :columnDefs="tc"
        :localeText="localeText1"
        :suppressRowClickSelection="true"
      ></AgGridVuesCopys>
    </template>

    <paginationCopys
      :page-size="pagination.pageSize"
      :current="pagination.page"
      :total="pagination.total"
      show-total
      show-jumper
      show-page-size
      @change="nextDoRefreshPage"
      @page-size-change="nextDoRefreshSize"
      style="justify-content: center"
    />

    <a-drawer
      placement="bottom"
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      height="90%"
      :visible="pageData.showAdd"
      unmountOnClose
      @cancel="pageData.showAdd = false"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="width: 100%; height: 100%">
        <a-form ref="formRef" :model="dataFormFinishedInspection" layout="horizontal">
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="流转卡扫描"
                field="flowCardCodeSan"
                :validate-trigger="['change', 'blur']"
              >
                <a-input-search
                  class="bacClass"
                  placeholder="请输入流转卡扫描"
                  v-model="dataFormFinishedInspection.flowCardCodeSan"
                  button-text="提取"
                  search-button
                  @search="search"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="验布员"
                field="flowCardCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '验布员不能为空' }]"
              >
                <a-input
                  class="bacClass"
                  disabled
                  v-model="dataFormFinishedInspection.flowCardCode"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="班次"
                field="classesx"
                :validate-trigger="['change', 'blur']"
              >
                <a-input class="bacClass" v-model="dataFormFinishedInspection.classesx" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="组别"
                field="tranches"
                :validate-trigger="['change', 'blur']"
              >
                <a-input class="bacClass" v-model="dataFormFinishedInspection.tranches" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="当班日期"
                field="dayDate"
                :validate-trigger="['change', 'blur']"
              >
                <a-date-picker  popup-container="html" 
                  class="bacClass"
                  style="width: 100%"
                  v-model="dataFormFinishedInspection.dayDate"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="纸管重量"
                field="paperTubeWeight"
                :validate-trigger="['change', 'blur']"
              >
                <a-input
                  class="bacClass"
                  disabled
                  v-model="dataFormFinishedInspection.paperTubeWeight"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="品名"
                field="productName"
                :validate-trigger="['change', 'blur']"
              >
                <a-input
                  class="bacClass"
                  disabled
                  v-model="dataFormFinishedInspection.productName"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="门福状态"
                field="efficaciousState"
                :validate-trigger="['change', 'blur']"
              >
                <a-select popup-container="html" 
                  class="bacClass"
                  v-model="dataFormFinishedInspection.efficaciousState"
                  allow-search
                >
                  <a-option :value="0">开幅</a-option>
                  <a-option :value="1">不开幅</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="色号"
                field="colorCode"
                :validate-trigger="['change', 'blur']"
              >
                <a-input class="bacClass" disabled v-model="dataFormFinishedInspection.colorCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="布号"
                field="greyCode"
                :validate-trigger="['change', 'blur']"
              >
                <a-input class="bacClass" disabled v-model="dataFormFinishedInspection.greyCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="对色状态"
                field="coloringState"
                :validate-trigger="['change', 'blur']"
              >
                <a-select popup-container="html" 
                  class="bacClass"
                  v-model="dataFormFinishedInspection.coloringState"
                  allow-search
                >
                  <a-option :value="1">合格</a-option>
                  <a-option :value="0">不合格</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="设备编号"
                field="machineOdd"
                :validate-trigger="['change', 'blur']"
              >
                <a-input class="bacClass" v-model="dataFormFinishedInspection.machineOdd" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="验布结果"
                field="checkResult"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '请选择验布结果' }]"
              >
                <a-select popup-container="html" 
                  class="bacClass"
                  v-model="dataFormFinishedInspection.checkResult"
                  allow-search
                >
                  <a-option :value="0">OK</a-option>
                  <a-option :value="1">不OK</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="验布匹号"
                field="houseNumTk"
                :validate-trigger="['change', 'blur']"
              >
                <a-input-number
                  class="bacClass"
                  v-model="dataFormFinishedInspection.houseNumTk"
                  @press-enter="addEnteringDefect"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="24">
              <a-form-item label="匹数信息" :label-col-flex="pageData.labelColFlex">
                <div style="border: 1px solid #d7d1d1; width: 100%; padding: 10px">
                  <a-space wrap>
                    <a-button
                      :type="item.checked ? 'primary' : ''"
                      v-for="item in pageData.houseNumList"
                      size="small"
                      @click="selectEnteringDefect(item.value)"
                      >{{ item.value }}</a-button
                    >
                  </a-space>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <a-row>
            <el-table
              ref="multipleTable"
              :data="pageData.queryDataFormEnteringDefect"
              tooltip-effect="dark"
              :header-cell-style="{ color: '#696969' }"
              border
            >
              <el-table-column align="center" prop="houseNum" label="匹号" width="100">
              </el-table-column>
              <el-table-column align="center" prop="defectName" label="疵点名称" width="100">
              </el-table-column>
              <el-table-column align="center" prop="numbers" label="个数" width="100">
              </el-table-column>
              <el-table-column align="center" prop="grades" label="等级" width="100">
              </el-table-column>
              <el-table-column align="center" prop="defectCount" label="疵数" width="100">
              </el-table-column>
              <el-table-column align="center" prop="deductMarks" label="扣分" width="100">
              </el-table-column>
              <el-table-column align="center" prop="qualifiedState" label="合格否" width="100">
                <template #default="scope">
                  <el-tag type="success" v-if="scope.row.qualifiedState == 0" class="gesture"
                    >ok</el-tag
                  >
                  <el-tag type="danger" v-if="scope.row.qualifiedState == 1" class="gesture"
                    >不ok</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column align="center" prop="reelLater" label="卷后" width="100">
              </el-table-column>
              <el-table-column align="center" prop="biasfilling" label="纬斜" width="100">
              </el-table-column>
              <el-table-column align="center" prop="breadths" label="幅宽" width="100">
              </el-table-column>
              <el-table-column align="center" prop="gramWeight" label="克重" width="100">
              </el-table-column>
              <el-table-column align="center" prop="remark" label="备注" width="100">
              </el-table-column>
              <el-table-column align="center" prop="testStartDate" label="检验开始" width="100">
              </el-table-column>
              <el-table-column align="center" prop="testEndDate" label="检验结束" width="100">
              </el-table-column>
              <el-table-column align="center" prop="elapsedDate" label="完成费时" width="100">
              </el-table-column>
            </el-table>
          </a-row> -->
        </a-form>
        <div style="width: 100%; height: 60%">
          <encapsulation-agrid
            ref="configAgGridRef"
            :configaggrid="configaggrid"
          ></encapsulation-agrid>
        </div>
      </div>
      <template #footer>
        <a-button @click="resultAdd">交班确认结果</a-button>
        <a-button @click="pageData.showAdd = false">关闭</a-button>
        <a-button type="primary" @click="sideOk">保存</a-button>
      </template>
    </a-drawer>
    <!-- 交班确认结果-->
    <a-drawer
      placement="bottom"
      height="50%"
      :visible="pageData.nestedVisible"
      @ok="resultOk"
      :mask-closable="false"
      ok-text="保存"
      @cancel="pageData.nestedVisible = false"
      unmountOnClose
    >
      <template #title> 交班确认结果 </template>
      <div>
        <a-form ref="resultFormRef" :model="dataFormList" layout="horizontal">
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="手感"
                field="handFeeling"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '手感必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.handFeeling" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option1"
                    :value="item.handFeeling"
                    :label="item.handFeeling"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="色级"
                field="colourGrade"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '色级必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.colourGrade" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option2"
                    :value="item.colorGrade"
                    :label="item.colorGrade"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="毛头毛粒"
                field="outletSeam"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '毛头毛粒必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.outletSeam" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option3"
                    :value="item.outletSeam"
                    :label="item.outletSeam"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="质检等级"
                field="qualityGrade"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '质检等级必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.qualityGrade" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option4"
                    :value="item.qualityLevel"
                    :label="item.qualityLevel"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="食毛效果"
                field="eatHair"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '食毛效果必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.eatHair" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option3"
                    :value="item.eatHair"
                    :label="item.eatHair"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="抓毛效果"
                field="ballWool"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '抓毛效果必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.ballWool" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option3"
                    :value="item.ballWool"
                    :label="item.ballWool"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="异常备注"
                field="anomalyRemark"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '异常备注必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.anomalyRemark" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option5"
                    :value="item.anomalyRemark"
                    :label="item.anomalyRemark"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="死棉"
                field="dieCotton"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '死棉必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.dieCotton" allow-search>
                  <a-option
                    v-for="(item, index) in pageData.option3"
                    :value="item.dieCotton"
                    :label="item.dieCotton"
                  ></a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="磨毛效果"
                field="sanding"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '磨毛效果必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormList.sanding" allow-search>
                  <a-option>ok</a-option>
                  <a-option>不ok</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="质检备注"
                field="qualityRemark"
                :validate-trigger="['change', 'blur']"
              >
                <a-textarea class="bacClass" v-model="dataFormList.qualityRemark" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="检验评语"
                field="resultComment"
                :validate-trigger="['change', 'blur']"
              >
                <a-textarea class="bacClass" v-model="dataFormList.resultComment" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-drawer>
    <!-- 修改缸号录入疵点-->
    <a-drawer
      placement="bottom"
      height="70%"
      :visible="pageData.cylinderNoVisible"
      @ok="cylinderNoOk"
      :mask-closable="false"
      ok-text="保存"
      @cancel="pageData.cylinderNoVisible = false"
      unmountOnClose
    >
      <template #title> 修改缸号录入疵点 </template>
      <div>
        <a-form ref="cylinderNoFormRef" :model="dataFormEnteringDefect" layout="horizontal">
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="5">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="匹号" field="houseNum">
                <a-input-number
                  class="bacClass"
                  disabled
                  v-model="dataFormEnteringDefect.houseNum"
                />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="纬斜" field="biasfilling">
                <a-input class="bacClass" v-model="dataFormEnteringDefect.biasfilling" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="幅宽" field="breadths">
                <a-input class="bacClass" v-model="dataFormEnteringDefect.breadths" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="卷后"
                field="reelLater"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '卷后必填' }]"
              >
                <a-input class="bacClass" v-model="dataFormEnteringDefect.reelLater" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="克重"
                field="gramWeight"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '克重必填' }]"
              >
                <a-input class="bacClass" v-model="dataFormEnteringDefect.gramWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="扣分"
                field="deductMarks"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '扣分必填' }]"
              >
                <a-input-number class="bacClass" v-model="dataFormEnteringDefect.deductMarks" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="等级"
                field="grades"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '等级必填' }]"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataFormEnteringDefect.grades" allow-search>
                  <a-option value="A">A</a-option>
                  <a-option value="B">B</a-option>
                  <a-option value="C">C</a-option>
                  <a-option value="D">D</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="合格否"
                field="qualifiedState"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '合格否必填' }]"
              >
                <a-select popup-container="html" 
                  class="bacClass"
                  v-model="dataFormEnteringDefect.qualifiedState"
                  allow-search
                >
                  <a-option :value="0">OK</a-option>
                  <a-option :value="1">不OK</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="grid-demo" :gutter="24">
            <a-form-item :label-col-flex="pageData.labelColFlex" label="备注" field="remark">
              <a-textarea class="bacClass" v-model="dataFormEnteringDefect.remark" allow-clear />
            </a-form-item>
          </a-row>
          <a-row class="grid-demo" :gutter="24">
            <a-form-item :label-col-flex="pageData.labelColFlex" label="疵点名称">
              <div style="border: 1px solid #d7d1d1; width: 100%; padding: 10px">
                <a-badge
                  v-for="(itme, index) in pageData.Blemish"
                  :count="itme.redBlue"
                  style="margin: 5px"
                >
                  <a-button
                    :type="itme.checked ? 'primary' : ''"
                    class="badge-btn"
                    size="small"
                    v-on:click="clickAdd(index)"
                    @dblclick="dblclick(index)"
                    >{{ itme.defectName }}</a-button
                  >
                </a-badge>
              </div>
            </a-form-item>
          </a-row>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import { useTable, usePagination, useTableColumn } from '@/hooks/table'

  import { ref, reactive, onMounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import 'ag-grid-community/styles/ag-grid.css'
  import 'ag-grid-community/styles/ag-theme-alpine.css'
  import { localeText } from '@/api/aggridZw'
  
  import usePermission from '@/store/modules/permission'
  interface paramData {
    FinishedInspection: any //主页签
    List: any //交班确认结果状态
    EnteringDefect: any //修改缸号录入疵点表
    DefectMarks: any //维护疵点扣分
    EnteringDefectList: any //修改缸号录入疵点列表
  }

  export default {
    //验布作业登记
    name: 'ClothInspection',
    setup() {
      const dataForm = reactive<paramData>({
        FinishedInspection: {}, //主页签
        List: [], //交班确认结果状态
        EnteringDefect: [], //修改缸号录入疵点表
        DefectMarks: [], //维护疵点扣分
        EnteringDefectList: [], //修改缸号录入疵点列表
      })
      //------ 主页签字段  ---
      const dataFormFinishedInspection = reactive<{
        id: any
        flowCardCodeSan: string | undefined
        flowCardCode: string | undefined
        testClothMember: string | undefined
        classesx: string | undefined
        tranches: string | undefined
        paperTubeWeight: any
        productName: string | undefined
        efficaciousState: number | undefined
        colorCode: string | undefined
        houseNum: any
        greyCode: string | undefined
        coloringState: number | undefined
        machineOdd: string | undefined
        checkResult: number | undefined
        houseNumTk: any
      }>({
        id: null,
        flowCardCodeSan: '',
        flowCardCode: '',
        testClothMember: '',
        classesx: '',
        tranches: '',
        paperTubeWeight: '',
        productName: '',
        efficaciousState: 0,
        colorCode: '',
        houseNum: '',
        greyCode: '',
        coloringState: 0,
        machineOdd: '',
        checkResult: 0,
        houseNumTk: '',
      })
      //------------交班确认结果------------
      const dataFormList = reactive<{
        id: any
        finishedInspectionID: any
        handFeeling: string | undefined
        outletSeam: string | undefined
        eatHair: string | undefined
        ballWool: string | undefined
        dieCotton: string | undefined
        sanding: string | undefined
        colourGrade: string | undefined
        qualityGrade: string | undefined
        qualityRemark: string | undefined
        anomalyRemark: string | undefined
        resultComment: string | undefined
        remark: string | undefined
      }>({
        id: null,
        finishedInspectionID: null,
        handFeeling: '',
        outletSeam: '',
        eatHair: '',
        ballWool: '',
        dieCotton: '',
        sanding: '',
        colourGrade: '',
        qualityGrade: '',
        qualityRemark: '',
        anomalyRemark: '',
        resultComment: '',
        remark: '',
      })

      //-----------修改缸号录入疵点----------
      const dataFormEnteringDefect = reactive<{
        id: any //id
        finishedInspectionID: any //关联成检主表ID字段
        biasfilling: string | undefined //纬斜
        remark: string | undefined //备注
        gramWeight: string | undefined //克重
        houseNum: number //匹号
        breadths: string | undefined //幅宽
        reelLater: string | undefined //卷后
        testStartDate: any //检验开始时间
        testEndDate: any //检验结束时间
        elapsedDate: any
        defectName: any //疵点名称
        defectCount: any //疵数
        numbers: any //个数
        deductMarks: any //扣分
        grades: any //验布等级
        qualifiedState: any //合格状态 0是不合格,1是合格
      }>({
        id: null, //id
        finishedInspectionID: null, //关联成检主表ID字段
        biasfilling: '', //纬斜
        remark: '', //备注
        gramWeight: '', //克重
        houseNum: 0, //匹号
        breadths: '', //幅宽
        reelLater: '', //卷后
        testStartDate: '', //检验开始时间
        testEndDate: '', //检验结束时间
        elapsedDate: '',
        defectName: '', //疵点名称
        defectCount: 0, //疵数
        numbers: 0, //个数
        deductMarks: '', //扣分
        grades: '', //验布等级
        qualifiedState: '', //合格状态 0是不合格,1是合格
      })
      //隐藏显示头部
      const headerShow = ref<boolean>(true)
      const pageData = reactive<{
        showAdd: boolean
        sideTitle: string
        dropDownData: any
        pageLoading: boolean
        theight: number
        rHeight: number | undefined
        labelColFlex: string
        queryData: any
        nestedVisible: boolean
        cylinderNoVisible: boolean
        option1: any
        option2: any
        option3: any
        option4: any
        option5: any
        queryDataFormEnteringDefect: any
        houseNumList: any
        btnList: any
      }>({
        showAdd: false,
        sideTitle: '新增验布作业登记',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        rHeight: 0,
        labelColFlex: '120px',
        queryData: {
          flowCardCode: '',
          createTimeArr: [],
        },
        nestedVisible: false,
        cylinderNoVisible: false,
        option1: [],
        option2: [],
        option3: [],
        option4: [],
        option5: [],
        queryDataFormEnteringDefect: [],
        houseNumList: [],
        btnList: [],
      })
      const permissionStore = usePermission()
      const isEditPermission = ref<boolean>(false)
      const getBtnPermission = () => {
        if (permissionStore.hasPermisson('ybzydj.cx')) {
          pageData.btnList.push('查询')
        }
        if (permissionStore.hasPermisson('ybzydj.xz')) {
          pageData.btnList.push('新增')
        }
        if (permissionStore.hasPermisson('ybzydj.xg')) {
          isEditPermission.value = true
        }
        if (permissionStore.hasPermisson('ybzydj.dc')) {
          pageData.btnList.push('导出')
        }
      }
      //查询列表
      onMounted(() => {
        selectHandler()
        getBtnPermission()
      })

      //切换分页
      const nextDoRefreshPage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const nextDoRefreshSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }
      const pagination = usePagination(doRefresh)
      const table = useTable()
      function doRefresh() {
        pageData.pageLoading = true
        if (pageData.queryData.createTimeArr == undefined) {
          pageData.queryData.createTimeArr = []
        }
        post({
          url: 'dwQms/FinishedInspection/getPage',
          data: {
            page: pagination.page,
            size: pagination.pageSize,
            flowCardCode: pageData.queryData.flowCardCode,
            startDate: pageData.queryData.createTimeArr[0],
            endDate: pageData.queryData.createTimeArr[1],
            deleteState: 0,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              table.handleSuccess(data.data)
              pagination.setTotalSize(data.total)
              gridOption.value.setRowData(data.data)
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      //查询
      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      //------新增、修改页面开始------
      const addHandler = () => {
        selectLevel()
        for (var key in dataFormFinishedInspection) {
          if (key === 'id') {
            dataFormFinishedInspection[key] = null
          } else {
            dataFormFinishedInspection[key] = ''
          }
        }
        for (var key in dataFormList) {
          if (key === 'id') {
            dataFormList[key] = null
          } else {
            dataFormList[key] = ''
          }
        }
        for (var key in dataFormEnteringDefect) {
          if (key === 'id') {
            dataFormList[key] = null
          } else {
            dataFormList[key] = ''
          }
        }
        dataForm.FinishedInspection = {}
        dataForm.List = []
        dataForm.EnteringDefect = []
        dataForm.DefectMarks = []
        dataForm.EnteringDefectList = []
        pageData.queryDataFormEnteringDefect = []
        pageData.houseNumList = []
        pageData.showAdd = true
        pageData.sideTitle = '新增验布作业登记'
      }
      const editHandler = (record: paramData) => {
        selectLevel()
        pageData.houseNumList = []
        post({
          url: 'dwQms/FinishedInspection/selectMap',
          data: { flowCardCode: record.flowCardCode },
        }).then((res: any) => {
          if (res.code === 200) {
            var FinishedInspection: paramData = res.data.FinishedInspection
            for (var key in record) {
              dataFormFinishedInspection[key] = FinishedInspection[key]
            }
            dataForm.List = res.data.FinishedInspectionDetail
            dataForm.EnteringDefect = res.data.EnteringDefect
            dataForm.DefectMarks = res.data.DefectMarks
            pageData.queryDataFormEnteringDefect = res.data.EnteringDefect
            console.log(dataFormFinishedInspection)
            if (dataForm.EnteringDefect.length > 0) {
              for (let i = 0; i < dataFormFinishedInspection.houseNum; i++) {
                var objtemp: any = {}
                var num = i + 1
                var temp: any = false
                for (let index = 0; index < dataForm.EnteringDefect.length; index++) {
                  if (dataForm.EnteringDefect[index].houseNum == num) {
                    temp = true
                    break
                  }
                }
                objtemp.value = num
                objtemp.checked = temp
                pageData.houseNumList.push(objtemp)
              }
            } else {
              for (let i = 0; i < dataFormFinishedInspection.houseNum; i++) {
                var objtemp: any = {}
                objtemp.value = i + 1
                objtemp.checked = false
                pageData.houseNumList.push(objtemp)
              }
            }
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
        pageData.sideTitle = '修改验布作业登记'
        pageData.showAdd = true
      }

      const formRef = ref<FormInstance>()
      const sideOk = () => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            dataForm.FinishedInspection = dataFormFinishedInspection
            if (pageData.sideTitle === '新增验布作业登记') {
              post({
                url: 'dwQms/FinishedInspection/insertMap',
                data: dataForm,
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()

                  pageData.showAdd = false

                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            } else {
              post({
                url: 'dwQms/FinishedInspection/updateList',
                data: dataForm,
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false

                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            }
          }
        })
      }
      //------新增、修改页面结束------
      //------删除方法开始------
      const deleteHandler = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          onOk() {
            post({
              url: 'dwQms/FinishedInspection/delete',
              data: gridOption.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            }).then(({ code, data }: any) => {
              if (code === 200) {
                Message.success({
                  content: '删除成功',
                  duration: 5000,
                })

                pagination.page = 1
                doRefresh()
              } else {
                Message.error({
                  content: '删除失败',
                  duration: 5000,
                })
              }
            })
          },
        })
      }
      //------删除方法结束------

      // 表格准备事件
      const tableColumns = useTableColumn([
        {
          title: '检验编号',
          key: 'detectionCode',
          dataIndex: 'detectionCode',
        },
        {
          title: '流转卡号',
          key: 'flowCardCode',
          dataIndex: 'flowCardCode',
        },
        {
          title: '当班日期',
          key: 'dayDate',
          dataIndex: 'dayDate',
        },
        {
          title: '布号',
          key: 'greyCode',
          dataIndex: 'greyCode',
        },
        {
          title: '验布员',
          key: 'testClothMember',
          dataIndex: 'testClothMember',
        },
        {
          title: '班次',
          key: 'classesx',
          dataIndex: 'classesx',
        },
        {
          title: '客户',
          key: 'customName',
          dataIndex: 'customName',
        },
        {
          title: '色号',
          key: 'colorCode',
          dataIndex: 'colorCode',
        },
        {
          title: '色称',
          key: 'colorName',
          dataIndex: 'colorName',
        },
        // {
        //     title: "检验开始时间",
        //     key: "yarnBatch",
        //     dataIndex: "yarnBatch"
        // },

        {
          title: '设备编号',
          key: 'machineOdd',
          dataIndex: 'machineOdd',
        },

        {
          title: '修改日期',
          key: 'updateTime',
          dataIndex: 'updateTime',
        },

        {
          title: '检验日期',
          key: 'createTime',
          dataIndex: 'createTime',
        },

        {
          title: '纱批',
          key: 'yarnBatch',
          dataIndex: 'yarnBatch',
        },

        {
          title: '对色状态',
          key: 'coloringState',
          dataIndex: 'coloringState',
          cellRenderer: {
            template: `
                  <el-tag type="success" v-if="states == 1">合格</el-tag>
                  <el-tag type="danger"  v-if="states == 0">不合格</el-tag>
                  `,
            setup(props: any) {
              return {
                states: props.params.data.coloringState,
              }
            },
          },
        },
        {
          title: '流转卡号备注',
          key: 'cardCodeRemark',
          dataIndex: 'cardCodeRemark',
        },

        {
          title: '质检等级',
          key: 'qualityGrade',
          dataIndex: 'qualityGrade',
        },

        {
          title: '异常详细说明',
          key: 'anomalyRemark',
          dataIndex: 'anomalyRemark',
        },

        {
          title: '检验评语',
          key: 'resultComment',
          dataIndex: 'resultComment',
        },

        {
          title: '质检备注',
          key: 'qualityRemark',
          dataIndex: 'qualityRemark',
        },
        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          slotName: 'act',
          width: 150,
          fixed: 'right',
        },
      ])
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1
      }
      let tc: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          width: o.width,
          cellRenderer: o.cellRenderer,
        }
        if (o.slotName === 'act') {
          obj['resizable'] = false
          obj['filter'] = false
          obj['sortable'] = false
          obj['lockPosition'] = o.fixed
          obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a">修改</el-button>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                a,
              }
            },
          }
        }
        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc = a.concat(tc)
      const localeText1: any = ref(localeText)

      //流转卡号提取
      const search = (val: any) => {
        // dataFormFinishedInspection.flowCardCode = 'YKX000002'
        // dataFormFinishedInspection.houseNum = 5
        // dataFormFinishedInspection.productName = '测试01'
        // dataFormFinishedInspection.greyCode = '测试01'
        // dataFormFinishedInspection.colorCode = '测试01'
        // dataFormFinishedInspection.dayDate = new Date()
        // dataFormEnteringDefect.testStartDate = data_string(new Date())

        // for (let i = 0; i <  dataFormFinishedInspection.houseNum; i++) {
        //   var objtemp:any = {}
        //   objtemp.value = i + 1
        //   objtemp.checked = false
        //   pageData.houseNumList.push(objtemp)
        // }
        post({
          url: 'aps/circulatCard/getList',
          data: { flowCardCode: dataFormFinishedInspection.flowCardCodeSan },
        }).then((res: any) => {
          if (res.code === 200) {
            if (res.data.length == 0) {
              Message.error({
                content: '流转卡号不存在！',
                duration: 5000,
              })
            } else {
              pageData.houseNumList = []
              var obj = res.data[0]
              //赋值
              console.log(obj.houseNum)
              dataFormFinishedInspection.productName = obj.productName
              dataFormFinishedInspection.greyCode = obj.greyCode
              dataFormFinishedInspection.colorCode = obj.colorName
              dataFormFinishedInspection.flowCardCode = obj.flowCardCode
              dataFormFinishedInspection.paperTubeWeight = obj.tapesWeight
              dataFormFinishedInspection.dayDate = new Date()
              dataFormFinishedInspection.houseNum = obj.houseNum
              dataFormEnteringDefect.testStartDate = data_string(new Date())
              for (let i = 0; i < dataFormFinishedInspection.houseNum; i++) {
                var objtemp: any = {}
                objtemp.value = i + 1
                objtemp.checked = false
                pageData.houseNumList.push(objtemp)
              }
            }
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })
      }

      //交班确认结果弹框
      const resultAdd = () => {
        if (dataForm.List.length == 0) {
          for (var key in dataFormList) {
            if (key === 'id') {
              dataFormList[key] = null
            } else {
              dataFormList[key] = ''
            }
          }
        } else {
          for (var key in dataFormList) {
            dataFormList[key] = dataForm.List[0][key]
          }
        }
        selectFoundation()
        pageData.nestedVisible = true
      }
      //获取下拉基础信息
      function selectFoundation() {
        //手感
        post({ url: 'dwQms/HandFeeling/getFieldValue', data: { handFeeling: '' } }).then(
          ({ data, code }: any) => {
            if (code === 200) {
              pageData.option1 = data
            }
          }
        )
        //色级
        post({ url: 'dwQms/ColorGrade/getFieldValue', data: { colorGrade: '' } }).then(
          ({ data, code }: any) => {
            if (code === 200) {
              pageData.option2 = data
            }
          }
        )
        //毛头毛粒、食毛效果、抓毛效果、死棉、磨毛效果
        post({ url: 'dwQms/VerifyclothResult/getList', data: { dieCotton: '' } }).then(
          ({ data, code }: any) => {
            if (code === 200) {
              pageData.option3 = data
            }
          }
        )
        //质检等级
        post({ url: 'dwQms/QualityLevel/getFieldValue', data: { qualityLevel: '' } }).then(
          ({ data, code }: any) => {
            if (code === 200) {
              pageData.option4 = data
            }
          }
        )
        //异常备注
        post({ url: 'dwQms/AnomalyRemark/getFieldValue', data: { anomalyRemark: '' } }).then(
          ({ data, code }: any) => {
            if (code === 200) {
              pageData.option5 = data
            }
          }
        )
      }
      //交班确认结果保存
      const resultFormRef = ref<FormInstance>()
      const resultOk = () => {
        resultFormRef.value?.validate().then((err: any) => {
          if (!err) {
            if (dataForm.List.length == 0) {
              dataForm.List.push(dataFormList)
            } else {
              dataForm.List[0] = dataFormList
            }
            pageData.nestedVisible = false
          }
        })
      }
      //验布匹号回车弹框
      const addEnteringDefect = () => {
        if (!dataFormFinishedInspection.houseNum) {
          Message.error({
            content: '请扫描流转卡',
            duration: 5000,
          })
          return
        }
        if (!dataFormFinishedInspection.houseNumTk) {
          Message.error({
            content: '请输入验布匹号再进行操作',
            duration: 5000,
          })
          return
        }
        pageData.cylinderNoVisible = true
        //查询对应的匹号去渲染旧数据
        if (dataForm.EnteringDefect.length > 0) {
          var temp: boolean = false
          var objDetails: any = {}
          for (let index = 0; index < dataForm.EnteringDefect.length; index++) {
            const element = dataForm.EnteringDefect[index]
            if (element.houseNum == dataFormFinishedInspection.houseNumTk) {
              temp = true
              objDetails = element
              for (let index1 = 0; index1 < pageData.Blemish.length; index1++) {
                const element1 = pageData.Blemish[index1]
                if (element1.defectName == element.defectName) {
                  pageData.Blemish[index1].redBlue = element.numbers
                  if (pageData.Blemish[index1].redBlue > 0) {
                    pageData.Blemish[index1].checked = true
                  } else {
                    pageData.Blemish[index1].checked = false
                  }
                  continue
                }
              }
            }
          }
          if (temp) {
            for (var key in dataFormEnteringDefect) {
              dataFormEnteringDefect[key] = objDetails[key]
            }
          } else {
            selectLevel()
            for (var key in dataFormEnteringDefect) {
              if (key === 'id') {
                dataFormEnteringDefect[key] = null
              } else if (key === 'testStartDate') {
              } else {
                dataFormEnteringDefect[key] = ''
              }
            }
          }
        } else {
          selectLevel()
          for (var key in dataFormEnteringDefect) {
            if (key === 'id') {
              dataFormEnteringDefect[key] = null
            } else if (key === 'testStartDate') {
            } else {
              dataFormEnteringDefect[key] = ''
            }
          }
        }
        dataFormEnteringDefect.houseNum = dataFormFinishedInspection.houseNumTk
      }

      const cylinderNoFormRef = ref<FormInstance>()
      //修改缸号录入疵点保存
      const cylinderNoOk = () => {
        cylinderNoFormRef.value?.validate().then((err) => {
          if (!err) {
            pageData.cylinderNoVisible = false
            for (let index = 0; index < pageData.Blemish.length; index++) {
              const element = pageData.Blemish[index]
              dataFormEnteringDefect.defectName = element.defectName
              var temp: boolean = false
              var j: number = 0
              for (let i = 0; i < dataForm.EnteringDefect.length; i++) {
                if (
                  dataFormFinishedInspection.houseNumTk == dataForm.EnteringDefect[i].houseNum &&
                  dataForm.EnteringDefect[i].defectName == element.defectName
                ) {
                  temp = true
                  j = i
                  continue
                }
              }
              dataFormEnteringDefect.numbers = element.redBlue
              dataFormEnteringDefect.defectCount = element.redBlue
              if (temp) {
                dataForm.EnteringDefect[j] = JSON.parse(JSON.stringify(dataFormEnteringDefect))
              } else {
                dataForm.EnteringDefect.push(JSON.parse(JSON.stringify(dataFormEnteringDefect)))
              }
            }
            pageData.queryDataFormEnteringDefect = dataForm.EnteringDefect
          }
          for (let index = 0; index < pageData.houseNumList.length; index++) {
            const element = pageData.houseNumList[index]
            if (dataFormEnteringDefect.houseNum == element.value) {
              pageData.houseNumList[index].checked = true
            }
          }
        })
      }
      function data_string(d) {
        var ar_date = [
          d.getFullYear(),
          d.getMonth() + 1,
          d.getDate(),
          d.getHours(),
          d.getMinutes(),
          d.getSeconds(),
        ]
        for (var i = 0; i < ar_date.length; i++) ar_date[i] = dFormat(ar_date[i])
        console.log(ar_date.slice(0, 3).join('-') + ' ' + ar_date.slice(3).join(':'))
        return ar_date.slice(0, 3).join('-') + ' ' + ar_date.slice(3).join(':')
        function dFormat(i) {
          return i < 10 ? '0' + i.toString() : i
        }
      }
      //------获取缸号录入疵点--》疵点名称------
      function selectLevel() {
        post({
          url: 'dwQms/VerifyclothBlemish/selectLevel',
          data: {
            blemishType: '验布疵点',
          },
        }).then(({ data, code }: any) => {
          if (code === 200) {
            pageData.Blemish = data.map((item: any) => {
              var o = {
                defectName: item.blemishName,
                value: item.id,
                checked: false,
                redBlue: 0,
              }
              return o
            })
          }
        })
      }

      var time: NodeJS.Timeout | null = null
      const clickAdd = (index: any) => {
        clearTimeout(time) //首先清除计时器
        time = setTimeout(() => {
          pageData.Blemish[index].checked = true
          pageData.Blemish[index].redBlue++
        }, 300) //大概时间300ms
      }

      const dblclick = (index: any) => {
        clearTimeout(time) //清除
        if (pageData.Blemish[index].redBlue > 0) {
          pageData.Blemish[index].redBlue--
        }
        if (pageData.Blemish[index].redBlue <= 0) {
          pageData.Blemish[index].checked = false
        }
      }

      const selectEnteringDefect = (houseNum: any) => {
        pageData.queryDataFormEnteringDefect = []
        for (let index = 0; index < dataForm.EnteringDefect.length; index++) {
          const element = dataForm.EnteringDefect[index]
          if (element.houseNum == houseNum) {
            pageData.queryDataFormEnteringDefect.push(element)
          }
        }
      }
      const exportHandler = () => {
        // let selectList = gridOption.value.getSelectedRows();
        // // console.log(selectList);
        // if (selectList.length === 0) {
        //     Message.error('请勾选需要导出的数据')
        //     return
        // } else {
        //     //导出数据
        //     let nowRow = table.dataList.filter(function (o) {
        //         return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
        //     })
        //     assTable(cfsValue, nowRow, '排缸信息');
        // }
      }
      const configAgGridRef = ref(null)
      const addDrawerColumn = ref([
        {
          headerName: '匹号',
          field: 'houseNum',
        },
        {
          headerName: '疵点名称',
          field: 'defectName',
        },
        {
          headerName: '个数',
          field: 'numbers',
        },
        {
          headerName: '等级',
          field: 'grades',
        },
        {
          headerName: '疵数',
          field: 'defectCount',
        },
        {
          headerName: '扣分',
          field: 'deductMarks',
        },
        {
          headerName: '合格否',
          field: 'qualifiedState',
          valueGetter: (params: any) => {
            if (params.data.qualifiedState == 0) {
              return 'ok'
            } else if (params.data.qualifiedState == 1) {
              return '不ok'
            }
          },
        },
        {
          headerName: '卷后',
          field: 'realLater',
        },
        {
          headerName: '纬斜',
          field: 'biasfilling',
        },
        {
          headerName: '幅宽',
          field: 'breadths',
        },
        {
          headerName: '克重',
          field: 'gramWeight',
        },
        {
          headerName: '备注',
          field: 'remark',
        },
        {
          headerName: '检验开始',
          field: 'testStartDate',
        },
        {
          headerName: '检验结束',
          field: 'testEndDate',
        },
        {
          headerName: '完成费时',
          field: 'elapsedDate',
        },
      ])
      let configaggrid = ref({
        url: '', //接口路径
        queryData: {
          //接口参数
        },
        paginationShow: true, //分页是否显示
        invokeiIterface: false, //是否调用接
        rowMultiSelectWithClick: true, //点击行是否多选
        column: addDrawerColumn,
      })

      return {
        deleteHandler,
        sideOk,
        resultOk,
        cylinderNoOk,
        formRef,
        resultFormRef,
        cylinderNoFormRef,
        dataForm,
        dataFormFinishedInspection,
        dataFormList,
        dataFormEnteringDefect,
        addHandler,
        pagination,
        table,
        pageData,
        editHandler,
        selectHandler,
        headerShow,
        nextDoRefreshPage,
        nextDoRefreshSize,
        defaultColDef,
        localeText1,
        tc,
        gridReady,
        gridOption,
        search,
        resultAdd,
        addEnteringDefect,
        clickAdd,
        dblclick,
        selectEnteringDefect,
        getBtnPermission,
        isEditPermission,
        exportHandler,
        configAgGridRef,
        configaggrid,
        addDrawerColumn,
      }
    },
    components: { Toolbar,  },
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
